<template>

    <section class="content-box">
        <div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="12">
                <h2>会计科目</h2>
            </el-col>
            <el-col :span="12">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd"> 查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" class="el-icon-plus" @click="handleAdd"> 新建</el-button>
                    </el-form-item>
                    <label for="file" class="label-file">导入</label>
                    <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
                </el-form>
            </el-col>
        </el-col>
        <!--列表-->
        <el-table class="indexList" :data="tableData" highlight-current-row>
            <el-table-column prop="AccountItem_Code" label="编码" width="120" sortable>
            </el-table-column>
            <el-table-column prop="AccountItem_Name" label="名称" width="180" sortable>
            </el-table-column>
            <el-table-column prop="AccountItem_FullName" label="全名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="AccountItem_Level" label="级次" width="120" sortable>
            </el-table-column>
            <el-table-column prop="BalanceDirection" label="借" width="80" sortable>
            </el-table-column>
            <el-table-column prop="IsEnabled" label="有效" width="120" sortable>
            </el-table-column>
            <el-table-column prop="AccountBasic_Name" label="科目类型" width="120">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <!-- scope.$index 当前列表项index  , row 当前行的所有字段。  -->
                    <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="addForm" :label-width="formLabelWidth" ref="addForm">
                <el-form-item label="上级科目：">
                    <el-select v-model="addForm.AccountItem_ParentCode" filterable placeholder="请选择上级科目" >
                        <el-option v-for="v in AccountItem_ParentCode" :key="v.Code" :label="v.Code+'~'+ v.Name" :value="v.Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="inp" label="科目名称：">
                    <el-input v-model="addForm.AccountItem_Name" auto-complete="off" placeholder="请输入科目名称"></el-input>
                </el-form-item>
                <el-form-item label="科目类型：">
                    <el-select v-model="addForm.AccountItem_AccountBasic" placeholder="请选择科目类型">
                        <el-option v-for="S in SubjectType" :key="S.AccountBasic_Code" :label="S.AccountBasic_Name" :value="S.AccountBasic_Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="余额方向：">          
                    <el-select v-model="addForm.AccountItem_BalanceDirection" placeholder="请选择余额方向">
                        <el-option v-for="item in Direction" :key="item.Value" :label="item.Key" :value="item.Value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有效：">
                    <el-checkbox v-model="addForm.AccountItem_IsEnabled">
                    </el-checkbox>
                </el-form-item>
                <el-form-item label="辅助核算：">
                    <el-checkbox-group v-model="addForm.AssistItem">
                        <el-checkbox :label="A.AIT_Name" v-for="A in Assisting" :value="A.AIT_Code" :key="A.AIT_Code"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="属性设置：">
                    <el-radio-group v-model="addForm.radio">
                        <el-radio :label="1" v-model="addForm.AccountItem_IsBankAccount" @click="clickme">银行科目</el-radio>
                        <el-radio :label="2" v-model="addForm.AccountItem_IsCashAccount">现金科目</el-radio>
                        <el-radio :label="3" v-model="addForm.AccountItem_IsReimburse">费用报销</el-radio>
                        <el-radio :label="4" v-model="addForm.AccountItem_IsSunYi">损益类</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny" key="dialog">
            <el-form :model="editForm" :label-width="formLabelWidth" ref="editForm">
                <el-form-item label="上级科目：">
                    <el-select v-model="editForm.AccountItem_ParentCode" filterable placeholder="请选择上级科目" >
                        <el-option v-for="v in AccountItem_ParentCode" :key="v.Code" :label="v.Code+'~'+ v.Name" :value="v.Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="inp" label="科目名称：">
                    <el-input v-model="editForm.AccountItem_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="科目类型：">
              
                    <el-select v-model="editForm.AccountItem_AccountBasic" placeholder="请选择科目类型">
                        <el-option v-for="S in SubjectType" :key="S.AccountBasic_Code" :label="S.AccountBasic_Name" :value="S.AccountBasic_Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="余额方向：">
                    <el-select v-model="editForm.AccountItem_BalanceDirection" placeholder="请选择余额方向">
                        <el-option v-for="item in Direction" :key="item.Value" :label="item.Key" :value="item.Value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有效：">
                    <el-checkbox v-model="editForm.AccountItem_IsEnabled">
                    </el-checkbox>
                </el-form-item>
                <el-form-item label="辅助核算：">
                    <el-checkbox-group v-model="editForm.AssistItem">
                        <el-checkbox v-for="A in Assisting" :label="A.AIT_Name" :value="A.AIT_Name" :key="A.AIT_Code"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="属性设置：">
                    <el-radio-group v-model="editForm.radio">
                        <el-radio :label="1" v-model="editForm.AccountItem_IsBankAccount" @click="clickme">银行科目</el-radio>
                        <el-radio :label="2" v-model="editForm.AccountItem_IsCashAccount">现金科目</el-radio>
                        <el-radio :label="3" v-model="editForm.AccountItem_IsReimburse">费用报销</el-radio>
                        <el-radio :label="4" v-model="editForm.AccountItem_IsSunYi">损益类</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog>
        </div>
    </section>
</template>

<script>
export default {
    name: 'AccountSubject',
    data() {
        return {
            radio:1,
            num:0,
            tableData: [],//数据列表
            addFormVisible: false, //新增界面是否显示
            editFormVisible: false, //编辑界面是否显示
            formLabelWidth: '120px',//input输入框宽度
            total: 0, //数据总数
            rows: 100, //每页显示多少条
            currentPage: 1,//当前页数
            Assisting: [],//辅助核算类型遍历
            filters: { //查询项
                name: '',
            },
            AccountItem_ParentCode:'',//上级科目
            SubjectType: [],//科目类型
            Direction: [{
                Key: '借方',
                Value: '1'
            }, {
                Key: '贷方',
                Value: '2'
            }],
            //新增界面数据
            addForm: {
                key:'',
                radio:'',//单选框
                AccountItem_Code: '',
                AccountItem_Name: '',
                AccountItem_IsEnabled: true,
                AccountItem_ParentCode:'',//上级科目
                AccountItem_AccountBasic: '',//科目类型
                AssistItem: [],//辅助核算类型参数
                AccountItem_BalanceDirection: '',//余额方向 1.借方 2.贷方
                AccountItem_IsBankAccount: false,//银行科目
                AccountItem_IsCashAccount: false,//现金科目
                AccountItem_IsReimburse: false,//费用报销
                AccountItem_IsSunYi: false//损益类              
            },
            //编辑界面数据
            editForm: {
                AccountItem_Code: '',
                AccountItem_Name: '',
                radio:'',//单选框
                AccountItem_IsEnabled: true,
                AccountItem_ParentCode:'',//上级科目
                AccountItem_AccountBasic: '',//科目类型
                AssistItem: [],//辅助核算类型参数
                AccountItem_BalanceDirection: '',//余额方向 1.借方 2.贷方
                AccountItem_IsBankAccount: '',//银行科目
                AccountItem_IsCashAccount: '',//现金科目
                AccountItem_IsReimburse: '',//费用报销
                AccountItem_IsSunYi: '',//损益类         
                key: ''
            }

        }
    },


    methods: {
        changePage(page) {//当前页数
            this.currentPage = page;
            this.getList();
        },
        update(e){
          let file = e.target.files[0];           
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post('importAccountSubject',param,config)
          .then(response=>{
            console.log(response.data);
          })        
        },
        getUpSubject:function(){//上级科目
            axios.post('GetParentAccountItemList').then(data => {
                this.AccountItem_ParentCode = data;
                const AccountItem_ParentCode = this.AccountItem_ParentCode;
            })
        },
        getSubjectType: function() { //科目类型
            axios.post('getAccountSubjectTypeList').then(data => {
                this.SubjectType = data.rows;
                const SubjectType = this.SubjectType;
            })
        },
        getAssistType: function() { //核算辅助类型
            axios.post('getAssistingAccountTypeList').then(data => {
                this.Assisting = data.rows;
                const Assisting = this.Assisting;
            })
        },
        getList: function() {
            axios.post("getAccountSubjectList", {
                page: this.currentPage,  // 当前页数， 
                rows: this.rows, // 每页多少条
            }).then(data => {
                this.total = data.total;//总页数
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = { "groupOp": "OR", "rules": [{ "field": "AccountItem_Name", "op": "cn", "data": this.filters.name }, { "field": "AccountItem_FullName", "op": "cn", "data": this.filters.name }], "groups": [] };
            axios.post("getAccountSubjectList", { filter: JSON.stringify(filterName) }).then(data => {
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        handleAdd: function() {//显示新增界面
            this.addForm = {
                AccountItem_Code: '',
                radio:'',
                AccountItem_Name: '',
                AccountItem_IsEnabled: true,
                AccountItem_AccountBasic: '',//科目类型
                AssistItem: [],//辅助核算类型参数
                AccountItem_BalanceDirection: '',//余额方向 1.借方 2.贷方
                AccountItem_IsBankAccount: '',//银行科目
                AccountItem_IsCashAccount: '',//现金科目
                AccountItem_IsReimburse: '',//费用报销
                AccountItem_IsSunYi: ''//损益类 
            };
            this.addFormVisible = true;
        },
        //编辑
        editSubmit: function() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        // this.editForm.AccountItem_IsCashAccount = this.editForm.AccountItem_IsCashAccount ? 1 : 0;
                        // this.editForm.AccountItem_IsReimburse = this.editForm.AccountItem_IsReimburse ? 1 : 0;
                        // this.editForm.AccountItem_IsSunYi = this.editForm.AccountItem_IsSunYi ? 1 : 0
                        // this.editForm.AccountItem_IsEnabled = this.editForm.AccountItem_IsEnabled ? 1 : 0;
                        // this.editForm.AccountItem_IsBankAccount = this.editForm.AccountItem_IsBankAccount ? 1 : 0;
                        // this.editForm.AccountItem_BalanceDirection = parseInt(this.editForm.AccountItem_BalanceDirection)
                        if(this.editForm.radio == 1){
                            this.editForm.AccountItem_IsBankAccount = true;
                            this.editForm.AccountItem_IsCashAccount = false;
                            this.editForm.AccountItem_IsReimburse = false;
                            this.editForm.AccountItem_IsSunYi = false;
                        }else if(this.editForm.radio == 2){
                            this.editForm.AccountItem_IsBankAccount = false;
                            this.editForm.AccountItem_IsCashAccount = true;
                            this.editForm.AccountItem_IsReimburse = false;
                            this.editForm.AccountItem_IsSunYi = false;
                        }else if(this.editForm.radio == 3){
                            this.editForm.AccountItem_IsBankAccount = false;
                            this.editForm.AccountItem_IsCashAccount = false;
                            this.editForm.AccountItem_IsReimburse = true;
                            this.editForm.AccountItem_IsSunYi = false;
                        }else if(this.editForm.radio == 4){
                            this.editForm.AccountItem_IsBankAccount = false;
                            this.editForm.AccountItem_IsCashAccount = false;
                            this.editForm.AccountItem_IsReimburse = false;
                            this.editForm.AccountItem_IsSunYi = true;
                        }
                        let para = this.editForm;
                        
                        para.AssistItem = para.AssistItem.toString();
                        axios.post("editAccountSubject", para).then((res) => {
                            
                            if (!res.Success) {
                                this.$notify.error({
                                    title: '失败',
                                    message: res.Message,
                                    type: 'success',
                                    offset: 200,
                                    duration: 1800
                                });
                                return;
                            }
                            this.$notify.success({
                                title: '成功',
                                message: `编号` + para.AccountItem_Code + ` 修改成功！！`,
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });
                            this.$refs['editForm'].resetFields();
                            this.editFormVisible = false;
                            this.getList();
                        });
                    });
                }
            });
        },
        //新增
        addSubmit: function() { //提交表单
            this.$refs.addForm.validate((valid) => {//验证
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        // this.addForm.key = this.num; 
                        // this.addForm.AccountItem_ParentCode = this.addForm.AccountItem_ParentCode;
                        // console.log(this.addForm.AssistItem,`this.addForm.AssistItem`);
                        // this.addForm.AssistItem = this.addForm.AssistItem; 
                        // console.log(this.addForm.AssistItem,`this.addForm.AssistItem`);                        
                        // this.addForm.AccountItem_AccountBasic = this.addForm.AccountItem_AccountBasic; 
                        // this.addForm.AccountItem_Name = this.addForm.AccountItem_Name; 
                        // this.addForm.AccountItem_IsCashAccount = this.addForm.AccountItem_IsCashAccount; 
                        // this.addForm.AccountItem_IsReimburse = this.addForm.AccountItem_IsReimburse; 
                        // this.addForm.AccountItem_IsSunYi = this.addForm.AccountItem_IsSunYi;
                        // this.addForm.radio = this.addForm.radio;
                        // this.addForm.AccountItem_IsEnabled = this.addForm.AccountItem_IsEnabled;
                        // this.addForm.AccountItem_IsBankAccount = this.addForm.AccountItem_IsBankAccount;
                        // this.addForm.AccountItem_BalanceDirection = parseInt(this.addForm.AccountItem_BalanceDirection)
                        if(this.addForm.radio == 1){
                            this.addForm.AccountItem_IsBankAccount = true;
                            this.addForm.AccountItem_IsCashAccount = false;
                            this.addForm.AccountItem_IsReimburse = false;
                            this.addForm.AccountItem_IsSunYi = false;
                        }else if(this.addForm.radio == 2){
                            this.addForm.AccountItem_IsBankAccount = false;
                            this.addForm.AccountItem_IsCashAccount = true;
                            this.addForm.AccountItem_IsReimburse = false;
                            this.addForm.AccountItem_IsSunYi = false;
                        }else if(this.addForm.radio == 3){
                            this.addForm.AccountItem_IsBankAccount = false;
                            this.addForm.AccountItem_IsCashAccount = false;
                            this.addForm.AccountItem_IsReimburse = true;
                            this.addForm.AccountItem_IsSunYi = false;
                        }else if(this.addForm.radio == 4){
                            this.addForm.AccountItem_IsBankAccount = false;
                            this.addForm.AccountItem_IsCashAccount = false;
                            this.addForm.AccountItem_IsReimburse = false;
                            this.addForm.AccountItem_IsSunYi = true;
                        }

                        let para = Object.assign({}, this.addForm);//拷贝对象进去
                        para.AssistItem = para.AssistItem.toString();
                        axios.post("addAccountSubject", para).then((res) => {
                            if (!res.Success) {
                                this.$notify.error({
                                    title: '失败',
                                    message: res.Message,
                                    type: 'success',
                                    offset: 200,
                                    duration: 1800
                                });
                                return;
                            }
                            
                            this.$notify.success({
                                title: '成功',
                                message: '新增成功',
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });
                           
                            
                            this.addFormVisible = false;//关闭窗口
                            this.getList();//重新刷新列表
                            this.$refs['addForm'].resetFields();
                        })
                    });
                }
            });
        },
        handleEdit: function(key, row) {//显示编辑界面
            this.editFormVisible = true;
            axios.post("getEntity1", {
                key: row.AccountItem_Code
            }).then(data => {
                this.editForm.key = data.ID;
                this.editForm.AccountItem_ParentCode = data.AccountItem_ParentCode;
                this.editForm.AccountItem_Code = data.AccountItem_Code;
                this.editForm.AccountItem_Name = data.AccountItem_Name;
                // console.log(this.editForm);
                // this.editForm.radio = data.radio;
                // console.log(data.radio);
                console.log(this.editForm.radio) ;
                this.editForm.AccountItem_IsBankAccount = data.AccountItem_IsBankAccount;//银行科目
                this.editForm.AccountItem_IsCashAccount = data.AccountItem_IsCashAccount;//现金科目
                this.editForm.AccountItem_IsReimburse = data.AccountItem_IsReimburse;//费用报销
                this.editForm.AccountItem_IsSunYi = data.AccountItem_IsSunYi;//损益类
                if(this.editForm.AccountItem_IsBankAccount == true){
                    this.editForm.radio = 1;
                }else if(this.editForm.AccountItem_IsCashAccount == true){
                    this.editForm.radio = 2;
                }else if(this.editForm.AccountItem_IsReimburse == true){
                    this.editForm.radio = 3;
                }else if(this.editForm.AccountItem_IsSunYi ==true){
                    this.editForm.radio = 4;
                }

                // console.log(data.AccountItem_IsBankAccount);
                // console.log(data.AccountItem_IsCashAccount);
                // console.log(data.AccountItem_IsReimburse);
                // console.log(data.AccountItem_IsSunYi);

                // this.editForm.AccountItem_IsBankAccount == true ? 1 : false;
                // this.editForm.AccountItem_IsCashAccount == true ? 2 : false;
                // this.editForm.AccountItem_IsReimburse == true ? 3 :false;
                // this.editForm.AccountItem_IsSunYi == true ? 4 :false;

                // console.log(data.AccountItem_IsBankAccount);
                // console.log(data.AccountItem_IsCashAccount);
                // console.log(data.AccountItem_IsReimburse);
                // console.log(data.AccountItem_IsSunYi);
                this.editForm.AccountItem_AccountBasic = data.AccountItem_AccountBasic;            
                this.editForm.AccountItem_BalanceDirection = data.AccountItem_BalanceDirection.toString();
                this.editForm.AccountItem_IsEnabled = data.AccountItem_IsEnabled;//
                if (data.AWAList.length === 0) {
                    this.editForm.AssistItem = [];
                } else {
                    //获取到 编辑项 已经选中的类型。 
                    this.editForm.AssistItem = []
                    for (let a = 0; a < data.AWAList.length; a++) {
                        this.editForm.AssistItem.push(data.AWAList[a].AIWAI_AssistItemType)
                    }
                }
                // this.editForm.AccountItem_IsBankAccount = row.AccountItem_IsBankAccount;
                // this.editForm.AccountItem_IsCashAccount = row.AccountItem_IsCashAccount;
                // this.editForm.AceditFormcountItem_IsReimburse - row.AccountItem_IsReimburse;
                // this.editForm.AccountItem_IsSunYi = row.AccountItem_IsSunYi;
            }).catch(err => {
                console.log(err);
            });
        },
        handleDel: function(key, row) {//删除         
            this.$confirm('确认删除该信息吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let para = {
                    code: row.AccountItem_Code,
                    key: row.ID
                };
                axios.post('deleAccountSubject', para).then((res) => {
                    this.$notify.success({
                        title: '成功',
                        message: `编号` + para.code + ` 删除成功！！！`,
                        type: 'success',
                        offset: 200,
                        duration: 1800
                    });
                    this.getList();
                });
            }).catch((err) => {
                console.log(err);
            });
        },
        clickme(){
            alert(1);
        }
    },
    mounted() {
        this.getList();//初始化页面时候就要率先执行获取列表类型接口
        this.getSubjectType();
        this.getAssistType();
        this.getUpSubject();
    }
}
</script>

<style scoped lang="scss">
@import '../../common/css/index.css';
label.label-file{
    margin:0;
}
.el-input, .inp{
    width: 90.8% !important;
}
.el-select{
    width: 80%;
}
.el-checkbox:nth-child(4){
    margin-right: 110px;
}
.el-checkbox:nth-child(5){
    margin-left: 0;
}
</style>